<template>
  <div class="news-list">
    <template v-if="flag">
      <el-table :data="tableData">
        <el-table-column prop="id" label="id" width="100px"> </el-table-column>
        <el-table-column prop="title" label="标题" width="500px">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="150px">
        </el-table-column>
        <el-table-column prop="time" label="发布时间" width="200px">
        </el-table-column>
        <el-table-column prop="content" label="内容" width="500px">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="amendNews(scope.row)"
              >编辑</el-button
            >
            <el-button type="warning" @click="removeNews(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="num"
        class="pagechange"
        :page-size="10"
        @current-change="handleChange"
        :current-page.sync="currentPage"
      >
      </el-pagination>
    </template>
    <template v-else>
      <h2 class="new-title">编辑新闻</h2>
      <el-form
        ref="newsRef"
        :model="form"
        label-width="80px"
        :rules="rules"
        class="newsform"
      >
        <el-form-item label="id" prop="id">
          <el-input v-model="form.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="新闻标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="发布时间" prop="time">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.time"
              style="width: 100%"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="特殊资源" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio label="1">热门</el-radio>
            <el-radio label="2">新闻</el-radio>
            <el-radio label="3">公告</el-radio>
            <el-radio label="4">活动</el-radio>
            <el-radio label="5">赛事</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="新闻内容" prop="content">
          <el-input type="textarea" v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="HandleEditNews">修改</el-button>
          <el-button @click="NoEditNews">取消</el-button>
        </el-form-item>
      </el-form>
    </template>
  </div>
</template>
<script>
import { getNews, deleteNews, editNews } from '@/api/news'
export default {
  data() {
    return {
      tableData: [],
      size: 1000,
      num: null,
      min: 0,
      max: 10,
      currentPage: null,
      flag: true,
      form: {
        id: '',
        title: '',
        time: '',
        content: '',
        type: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        type: [{ required: true, message: '请选择种类', trigger: 'change' }],
        content: [
          { required: true, message: '请填写新闻内容', trigger: 'blur' },
          {
            min: 10,
            message: '长度至少10个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await getNews({ size: this.size })
      this.num = res.data.total
      this.tableData = res.data.data.slice(this.min, this.max)
      this.tableData.forEach((item, index) => {
        switch (item.type) {
          case '1':
            this.tableData[index].type = '热门'
            break
          case '2':
            this.tableData[index].type = '新闻'
            break
          case '3':
            this.tableData[index].type = '公告'
            break
          case '4':
            this.tableData[index].type = '活动'
            break
          case '5':
            this.tableData[index].type = '赛事'
            break
          default:
            break
        }
      })
    },
    handleChange() {
      this.min = this.currentPage * 10 - 10
      this.max = this.currentPage * 10
      this.getData()
    },
    removeNews(id) {
      deleteNews({ id: id }).then(() => {
        this.getData()
      })
    },
    amendNews(data) {
      this.flag = false
      this.form.id = data.id
      this.form.type = '1'
      this.form.title = data.title
      this.form.time = data.time
      this.form.content = data.content
    },
    HandleEditNews() {
      editNews(this.form).then(() => {})
      this.flag = true
      this.getData()
    },
    NoEditNews() {
      this.flag = true
    }
    /* getData() {
      getNews({ size: this.size }).then((res) => {
        this.tableData = res.data.data
        this.tableData.forEach((item, index) => {
          switch (item.type) {
            case '1':
              this.tableData[index].type = '热门'
              break
            case '2':
              this.tableData[index].type = '新闻'
              break
            case '3':
              this.tableData[index].type = '公告'
              break
            case '4':
              this.tableData[index].type = '活动'
              break
            case '5':
              this.tableData[index].type = '赛事'
              break
            default:
              break
          }
        })
      })
    } */
  }
}
</script>
<style lang="scss">
.news-list {
  text-align: center;
  .pagechange {
    margin-top: 100px;
  }
  .newsform {
    width: 460px;
  }
  .new-title {
    text-align: left;
    margin-top: 10px;
    margin-bottom: 40px;
    text-indent: 20px;
  }
}
</style>